<template>
  <div id="dxchannelEdit">
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="700px" :closable="false">
      <Form ref="formChannel" :model="rowData" label-position="right" :label-width="100" :rules="rules" >
        <FormItem label="设备编号" >
          <Input placeholder="请输入20位编号" v-model="rowData.deviceCode" :readonly="readonly"/>
        </FormItem>
        <FormItem label="通道编号" prop="channelCode">
          <Input placeholder="请输入20位编号" v-model="rowData.channelCode"/>
        </FormItem>
        <FormItem label="通道名称" ><Input v-model="rowData.name" :readonly="modal.readonly"></Input></FormItem>
        <FormItem label="生成厂商" ><Input v-model="rowData.manufacture" :readonly="modal.readonly"></Input></FormItem>
        <FormItem label="云台类型" >
          <RadioGroup v-model="rowData.ptzType">
            <Radio :label=0 border>未知</Radio>
            <Radio :label=1 border>球机</Radio>
            <Radio :label=2 border>半球</Radio>
            <Radio :label=3 border>固定枪机</Radio>
            <Radio :label=4 border>遥控枪机</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="声音" >
          <i-switch v-model="rowData.hasAudio" true-color="#13ce66" false-color="#ff4949" size="large" style="width:70px" :readonly="modal.readonly">
            <span slot="open">有声音</span>
            <span slot="close">无声音</span>
          </i-switch>
        </FormItem>

        <FormItem :label-width="0">
          <Row :gutter="2">
            <Col span="12">
              <Form :label-width="100">
                <FormItem label="经度">
                  <Input v-model="rowData.longitude" style="width: 100px"></Input>
                </FormItem>
              </Form>
            </Col>
            <Col span="12">
              <Form :label-width="100">
                <FormItem label="纬度">
                  <Input v-model="rowData.latitude" style="width: 100px"></Input>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >提交</Button>
            <Button @click="close">取消</Button>
          </div>
        </FormItem>

      </Form>
    </Modal>

  </div>
</template>
<script>
/*import OrganizationTree from '@/components/topnav/OrganizationTree';
import UserSelect from "_c/topnav/UserModelSelect";*/
import Channel from "@/api/channel";
import {apiResult} from "@/libs/util";
export default {
  name:"dxchannelEdit",
  components:{},
  data(){
    return{
      api: new Channel(),
      readonly:true,
      batchAdd:false,
      modal:{
        show:false,
        loading:false,
        title:null,
        action:"VIEW",
        readonly:false,
      },
      rowData:{
        id: null,
        deviceId: null,
        deviceCode: null,
        channelCode: null,
        name:null,
        ptzType: 0,
        longitude: null,
        latitude: null,
        hasAudio: false,
        //hasAudioBool: false,
        manufacture: null
      },
      rules:{
        /** 经验：大坑，此项必须和字段名一致才有效，channelCode 不能写成 code*/
        channelCode:[ {required: true, message: '通道编号(ID)必须输入', trigger: 'blur'},
          {type:'string',min:20,max:20,message: '通道号必须是20位数字', trigger: 'blur'}
        ]
      }
    }

  },
  methods: {
    initRow: function () {
      return {
        id: null,
        deviceId: null,
        deviceCode: null,
        channelCode: null,
        name:null,
        ptzType: 0,
        longitude: null,
        latitude: null,
        hasAudio: false,
        //hasAudioBool: false,
        manufacture: null
      }
    },
    openDialog: function (action,row, callback) {
      this.modal.show=true;
      this.modal.readonly=false;
      this.modal.callback = callback;
      this.modal.show = true;
      this.modal.action = action;
      this.batchAdd = false;
      if (action=="ADD"){
        this.modal.title="新增";
        this.$refs["formChannel"].resetFields();
      }else if (action=="VIEW"){
        this.modal.title="浏览";
        this.$refs["formChannel"].resetFields();
        this.modal.readonly=true;
      }else if (action=="EDIT"){
        this.modal.title="修改";
      }
      if (row != null) {
        this.rowData = row;
        //console.log(this.rowData);
      }
    },
    save(){
      let that = this;

      this.$refs["formChannel"].validate((valid) => {
        if (that.modal.action == "VIEW"){that.close();}
        if (valid) {
          /** 新增 */
          if (that.rowData.id == null){
            //console.log(that.rowData);
            that.api.addChannel(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              })

            })
          }else{
            that.api.updateChannel(JSON.stringify(that.rowData)).then(res => {
              apiResult(res.data,true,result=>{
                if (!!that.modal.callback) that.modal.callback();
                that.close();
              });

            })
          }
        } else {
          that.$Message.error(this.$t('data_check_error'));
          return;
        }
      })
    },
    close(){
      this.$refs["formChannel"].resetFields();
      this.modal.show = false;
    }
  },
  mounted(){
    this.rowData = this.initRow();
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
